<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}

			.mui-views,
			.mui-view,
			.mui-pages,
			.mui-page,
			.mui-page-content {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background-color: #efeff4;
			}

			.mui-pages {
				top: 46px;
				height: auto;
			}

			.mui-scroll-wrapper,
			.mui-scroll {
				background-color: #efeff4;
			}

			.mui-page.mui-transitioning {
				-webkit-transition: -webkit-transform 300ms ease;
				transition: transform 300ms ease;
			}

			.mui-page-left {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}

			.mui-ios .mui-page-left {
				-webkit-transform: translate3d(-20%, 0, 0);
				transform: translate3d(-20%, 0, 0);
			}

			.mui-navbar {
				position: fixed;
				right: 0;
				left: 0;
				z-index: 10;
				height: 44px;
				background-color: #f7f7f8;
			}

			.mui-navbar .mui-bar {
				position: absolute;
				background: transparent;
				text-align: center;
			}

			.mui-android .mui-navbar-inner.mui-navbar-left {
				opacity: 0;
			}

			.mui-ios .mui-navbar-left .mui-left,
			.mui-ios .mui-navbar-left .mui-center,
			.mui-ios .mui-navbar-left .mui-right {
				opacity: 0;
			}

			.mui-navbar .mui-btn-nav {
				-webkit-transition: none;
				transition: none;
				-webkit-transition-duration: .0s;
				transition-duration: .0s;
			}

			.mui-navbar .mui-bar .mui-title {
				display: inline-block;
				width: auto;
			}

			.mui-page-shadow {
				position: absolute;
				right: 100%;
				top: 0;
				width: 16px;
				height: 100%;
				z-index: -1;
				content: '';
			}

			.mui-page-shadow {
				background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
				background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
			}

			.mui-navbar-inner.mui-transitioning,
			.mui-navbar-inner .mui-transitioning {
				-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
				transition: opacity 300ms ease, transform 300ms ease;
			}

			.mui-page {
				display: none;
			}

			.mui-pages .mui-page {
				display: block;
			}

			.mui-page .mui-table-view:first-child {
				margin-top: 15px;
			}

			.mui-page .mui-table-view:last-child {
				margin-bottom: 30px;
			}

			.mui-table-view {
				margin-top: 20px;
			}

			.mui-table-view span.mui-pull-right {
				color: #999;
			}

			.mui-table-view-divider {
				background-color: #efeff4;
				font-size: 14px;
			}

			.mui-table-view-divider:before,
			.mui-table-view-divider:after {
				height: 0;
			}

			.head {
				height: 40px;
			}

			#head {
				line-height: 40px;
			}

			.head-img {
				width: 40px;
				height: 40px;
			}

			#head-img1 {
				position: absolute;
				bottom: 10px;
				right: 40px;
				width: 40px;
				height: 40px;
			}

			.update {
				font-style: normal;
				color: #999999;
				margin-right: -25px;
				font-size: 15px
			}

			.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}

			.mui-ios .mui-navbar .mui-bar .mui-title {
				position: static;
			}
		</style>
	</head>

	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="setting" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<h1 class="mui-center mui-title">我的设置</h1>
			</div>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell mui-media">
								<a>
									<div class="mui-media-body">
										<p id="userName" class='mui-ellipsis'></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a>
									<div class="mui-media-body">
										<p id="userPhone" class='mui-ellipsis'></p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a>
									<div class="mui-media-body">
										<p id="userStudyHour" class='mui-ellipsis'></p>
									</div>
								</a>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a href="#account" class="mui-navigate-right">修改密码</a>
							</li>
							<li class="mui-table-view-cell">
								<a id="toSignUp" href="javascript:void(0);" class="mui-navigate-right">扫一扫</a>
							</li>
							<li id="teachClassManageFlag" style="display: none;" class="mui-table-view-cell">
								<a id="teachClassCode" href="javascript:void(0);" class="mui-navigate-right">生成签到码</a>
							</li>
						</ul>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell" style="text-align: center;">
								<a id="outLogin">退出登录</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--页面主内容区结束-->
		</div>
		<!--单页面结束-->
		<div id="account" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button id="backButton" type="button"
					class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<button id="editPassword" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">修改</button>
				<h1 class="mui-center mui-title">修改密码</h1>
			</div>
			<div class="mui-page-content">
				<p>新密码</p>
				<div class="mui-input-row">
					<input id='newPassword' type="text" class="mui-input-clear contact" placeholder="请填写新密码" />
				</div>
				<p>确认密码</p>
				<div class="mui-input-row">
					<input id='checkPassword' type="text" class="mui-input-clear contact" placeholder="请填写确认密码" />
				</div>
			</div>
		</div>


	</body>
	<script type="text/javascript" src="../js/jquery1113.js"></script>
	<script type="text/javascript" src="../js/data.js"></script>
	<script src="../js/mui.min.js "></script>
	<script src="../js/mui.view.js "></script>
	<script src="../js/util.js"></script>
	<script>
		mui.init();
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#setting'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();

		mui.plusReady(function() {
			
			var nview = plus.nativeObj.View.getViewById('tabBar');
			var pageW = window.innerWidth;
			
			nview.addEventListener('click', function(e) {
				var name = plus.storage.getItem('name');
				var password = plus.storage.getItem('password');
				if(name != '' && name != null && password != '' && password != null){
					var clientX = e.clientX;
					if(clientX > parseInt(pageW * 0.8)) {
						var jsonObject = {};
						jsonObject['name'] = name;
						jsonObject['password'] = password;
						xhr = new plus.net.XMLHttpRequest();
						xhr.onreadystatechange = function() {
							if (xhr.readyState == 4 && xhr.status == 200) {
								var data = JSON.parse(xhr.responseText);
								if (data && data.result == 1) {
									$("#userName").html("姓名："+data.name)
									$("#userPhone").html("电话："+data.phone)
									$("#userStudyHour").html("总学时："+data.studyHour)
									if(data.isTeachClassManager == 1){
										$("#teachClassManageFlag").show();
									} else{
										$("#teachClassManageFlag").hide();
									}
								} else {
									mui.alert(data.message);
								}
							}
						}
						xhr.open("POST", serverUrl + "reson/PubGetUserInfo.do");
						xhr.setRequestHeader("Content-Type", "application/json");
						xhr.send(JSON.stringify(jsonObject));
					}
				}
			});
		});

		$("#toSignUp").bind('click', function(e) {
			var name = plus.storage.getItem('name');
			var password = plus.storage.getItem('password');
			if(name != '' && name != null && password != '' && password != null){
				plus.webview.create('barcode.html', "barcode").show();
			} else {
				mui.alert('请先登录');
			}
		});

		$("#teachClassCode").bind("click", function() {
			plus.webview.create('teachClassCode.html', "teachClassCode").show();
		});

		$("#editPassword").bind("click", function() {

			var newPassword = $("#newPassword").val();
			if (!newPassword) {
				mui.alert("请填写新密码");
				return;
			}
			newPassword = newPassword.replace(/\s/g, "");
			if (newPassword === '') {
				mui.alert("请填写新密码");
				return;
			}
			var checkPassword = $("#checkPassword").val();
			if (!checkPassword) {
				mui.alert("请填写确认密码");
				return;
			}
			checkPassword = checkPassword.replace(/\s/g, "");
			if (checkPassword === '') {
				mui.alert("请填写确认密码");
				return;
			}
			if (newPassword !== checkPassword) {
				mui.alert("两次密码不相同");
				return;
			}
			var name = plus.storage.getItem('name');
			var password = plus.storage.getItem('password');
			if (name != null && name != '' && password != null && password != '') {
				var jsonObject = {};
				jsonObject['name'] = name;
				jsonObject['password'] = password;
				jsonObject['newPassword'] = newPassword;

				xhr = new plus.net.XMLHttpRequest();
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && xhr.status == 200) {
						var data = JSON.parse(xhr.responseText);
						if (data && data.result == 1) {
							plus.storage.setItem('password', newPassword);
							$("#newPassword").val("");
							$("#checkPassword").val("");
							mui.alert(data.message);
							mui.back();
						} else {
							mui.alert(data.message);
						}
					}
				}
				xhr.open("POST", serverUrl + "reson/PubEditPassword.do");
				xhr.setRequestHeader("Content-Type", "application/json");
				xhr.send(JSON.stringify(jsonObject));
			}
		});

		$("#outLogin").bind("click", function() {
			
			var btnArray = ['取消', '确定退出'];
			mui.confirm('确定退出当前用户？', '退出登录', btnArray, function(e) {
				if (e.index == 1) {
					plus.storage.removeItem('name');
					plus.storage.removeItem('password');
					util.toggleNview(0);
					util.changeSubpage(plus.webview.getLaunchWebview(), plus.webview.currentWebview(), {});
				}
			})
		});

		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
			//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
			view.addEventListener('pageBeforeShow', function(e) {
				//				console.log(e.detail.page.id + ' beforeShow');
			});
			view.addEventListener('pageShow', function(e) {
				//				console.log(e.detail.page.id + ' show');
			});
			view.addEventListener('pageBeforeBack', function(e) {
				//				console.log(e.detail.page.id + ' beforeBack');
			});
			view.addEventListener('pageBack', function(e) {
				//				console.log(e.detail.page.id + ' back');
			});
		})(mui);

		if (mui.os.stream) {
			document.getElementById("check_update").display = "none";
		}
	</script>

</html>